<template>
	<div class="app-container">
    <el-form :inline="true" :model="dataForm" @submit.native.prevent @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input placeholder="请验编号" v-model="dataForm.queryCheckId" :clearable="true" type="number" size="mini">
          <template slot="prepend">请验编号</template>
        </el-input>
      </el-form-item>
      <br />
      <el-form-item>
        <el-input placeholder="品名" v-model="dataForm.productName" :clearable="true" size="mini">
          <template slot="prepend">品名</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="GMP编码" v-model="dataForm.productGmp" :clearable="true" size="mini">
          <template slot="prepend">GMP编码</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="物料编码" v-model="dataForm.batchNum" :clearable="true" size="mini">
          <template slot="prepend">物料编码</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="货品规格" v-model="dataForm.productSpec" :clearable="true" size="mini">
          <template slot="prepend">货品规格</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-select v-model="dataForm.status" clearable placeholder="全部状态" size="mini">
          <el-option label="待取样" value="1" />
          <el-option label="待收样" value="2" />
          <el-option label="待分样" value="3" />
          <el-option label="检验中" value="4,5" />
          <el-option label="待结论" value="6" />
          <el-option label="待收报告" value="10" />
          <el-option label="待放行" value="7" />
          <el-option label="待确认" value="8" />
          <el-option label="已完成" value="11" />
      	</el-select>
      </el-form-item>

      <el-form-item v-if="userInfo.types.length != 0">
        <el-select v-model="dataForm.checkTypeId" clearable placeholder="全部分类" size="mini">
          <el-option
            v-for="t in userInfo.types"
            :key="t.checkTypeId"
            :label="t.checkTypeName"
            :value="t.checkTypeId">
          </el-option>
      	</el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="pan-btn primary-btn" @click="searchData()" icon="el-icon-search" size="mini">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table
    	:data="dataList"
    	v-loading="dataListLoading"
      ref="dataTable"
    	border
      fit
      highlight-current-row
      style="width: 100%">
      <el-table-column
        prop="checkId"
        header-align="center"
        align="center"
        label="编号"
        width="80">
      </el-table-column>
      <el-table-column
      	prop="status"
      	header-align="center"
      	align="center"
      	label="状态"
        width="80">
        <template slot-scope="{row}">
          <el-tag :type="row.status < 8 ? 'primary' : row.status == 8 ? 'danger' : 'success'" size="small">
            {{ row.status | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="checkTypeName"
        header-align="center"
        align="center"
        label="分类"
        width="80">
      </el-table-column>
      <el-table-column
        prop="productName"
        header-align="center"
        align="center"
        label="品名">
      </el-table-column>
      <el-table-column
        prop="batchNumPrefix"
        header-align="center"
        align="center"
        label="物料编码">
      </el-table-column>
      <el-table-column
        prop="productFullSpec"
        header-align="center"
        align="center"
        label="包装规格">
        <template slot-scope="{row}">
          <span v-html="row.productFullSpec"></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="passQuantity"
        header-align="center"
        align="center"
        label="放行数量">
        <template slot-scope="{row}">
          <span>{{ row.passQuantity + ' ' + row.passUnitName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="registCheckDepartmentName"
        header-align="center"
        align="center"
        label="请验部门">
      </el-table-column>
      <el-table-column
        prop="registCheckUserName"
        header-align="center"
        align="center"
        label="请验人">
      </el-table-column>
      <el-table-column
        prop="registCheckDate"
        header-align="center"
        align="center"
        label="请验时间">
        <template slot-scope="{row}">{{row.registCheckDate | changeTime}}</template>
      </el-table-column>
      <el-table-column
        prop="passUserName"
        header-align="center"
        align="center"
        label="放行人">
      </el-table-column>
      <el-table-column
        prop="passDate"
        header-align="center"
        align="center"
        label="放行时间">
        <template slot-scope="{row}">{{row.passDate | changeTime}}</template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
        width="160">
        <template slot-scope="scope">
          <el-button type="danger" class="pan-btn danger-btn" v-if="scope.row.status == 8" size="mini" @click="ok(scope.row)">确认</el-button>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="详情"
        width="100">
        <template slot-scope="scope">
          <el-button type="info" class="pan-btn info-btn" size="mini" @click="info(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <check-info
      v-if="infoVisible"
      @close="close('infoVisible')"
      @refreshData="getDataList"
      :childDataForm="childDataForm" />

    <check-info-merge
      v-if="infoMergeVisible"
      @close="close('infoMergeVisible')"
      @refreshData="getDataList"
      :childDataForm="childDataForm" />

	</div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import CommonMethod from '@/views/mixin/common'
  import { CODE_OK } from '@/common/js/config'
  import { checkList,confirm } from '@/api/check'
  import { isBlank,parseTime } from '@/common/js/utils'
  import CheckInfo from '@/views/modules/process/common/check-info'
  import CheckInfoMerge from '@/views/modules/process/common/check-info-merge'
	export default {
    name: 'fangxingqueren',
    filters: {
      procedureNameFilter(name) {
        if (!isBlank(name)) {
          return name.replace(',',' ')
        }
        return null
      },
      statusFilter(status) {
        const statusMap = {
          0: '待处理',
          1: '待取样',
          2: '待收样',
          3: '待分发',
          4: '检验中',
          5: '检验中',
          6: '待结论',
          10: '待收报告',
          7: '待放行',
          8: '待确认',
          11: '已完成',
          9: '已作废'
        }
        return statusMap[status]
      }
    },
    mixins: [CommonMethod],
    components: {
    	CheckInfo,CheckInfoMerge
    },
		data(){
      return{
        currentStatus: 8,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataForm: {
          status: '8'
        },
        childDataForm: '',
        infoVisible: false,
        infoMergeVisible: false
      }
		},
    mounted() {
      this.getInfo()
    },
    computed: {
      ...mapGetters([
         'userInfo'
      ])
    },
		methods:{
      ok(row) {
        this.$confirm('确认收到通知?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = {
            checkMergeId: row.checkMergeId,
            confirmUserId: this.userInfo.userId,
            confirmUserName: this.userInfo.name,
            confirmDate: parseTime(new Date())
          }
          confirm(data).then(res => {
            if (res.code === CODE_OK) {
              this.$message.success("提交成功")
              this.getDataList()
            }else{
              this.$message.error(res.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      searchData() {
      	this.pageIndex=1
      	this.getDataList()
      },
      getInfo() {
        this.getDataList()
      },
      getDataList() {
      	this.dataListLoading = true
        const params = {
          page: this.pageIndex,
          limit: this.pageSize,
          status: this.dataForm.status || '1,2,3,4,5,6,10,7,8,11',
          isMerge: 0,
          isPassOk: 0,
          checkTypeId: this.dataForm.checkTypeId || this.userInfo.types.map(t => {return t.checkTypeId}).join(','),
          productName: this.dataForm.productName || null,
          productGmp: this.dataForm.productGmp || null,
          batchNum: this.dataForm.batchNum || null,
          productSpec: this.dataForm.productSpec || null,
          checkId: this.dataForm.queryCheckId || null
        }
        checkList(params).then(res => {
        	if (res.code === CODE_OK) {
        		this.dataList = res.page.list
        		this.totalPage = res.page.totalCount
        	}else{
        		this.$message.error(res.msg)
        	}
        	this.dataListLoading = false
        }).catch()
      },
      info(row) {
        this.childDataForm = {
          currentStatus: this.currentStatus,
          info: row
        }
        if (row.isMerge == 0) {
          this.infoMergeVisible = !this.infoMergeVisible
        }else{
          this.infoVisible = !this.infoVisible
        }
      },
      close(val) {
        this.childDataForm = ''
        this[val] = !this[val]
      }
		}
	}
</script>

<style scoped>
  >>> .el-form-item__content {
    line-height: normal;
  }
</style>
